<div id="advanced-search">
    <div class="popup">
    <div class="popup-top-arrow"></div>
    <div class="popup-content">
        <form method="get" action="<?php $this->pUrl() ?>" id="search-form">
            <?php echo $form['elements'][0]['html'] ?>
            <div>
                <table class="search-fields">
                    <?php foreach ($form['elements'][1]['elements'] as $f): if ($f['id']!='search-add-field'):
                            ?>
                    <tr <?php echo $f['attributes'] ?>>
                        <td class="name"><?php p(@$f['label']) ?></td>
                        <td class="input"><?php if (!empty($f['elements'])) foreach ($f['elements'] as $el) echo @$el['html']; ?></td>
                        <td><a class="delete" href="javascript:;"><?php echo $this->icon('delete') ?></a></td>
                    </tr>
                        <?php endif ?>
                    <?php endforeach ?>
                </table>
            </div>
            <input type="submit" id="apply-filter-button" value="Apply Filter" />
            <?php echo $hidden ?>
        </form>
        <?php if ($loadSearchOptions): ?>
        <br /><br />
        <form method="get" action="<?php p(preg_replace('/\?.*/', '', $_SERVER['REQUEST_URI'])) ?>">
                <?php echo $hidden ?>
            <select name="_u_search_load" onchange="this.form.submit()">
                <option value="">** Or choose a saved search to load **</option>
                    <?php echo $loadSearchOptions ?>
            </select>
        </form>
        <?php endif ?>
    </div>
    <div class="popup-bottom"></div>
    </div>
</div>


<div id="save-advanced-search" style="display: none; position: absolute;">
    <div class="popup">
    <div class="popup-top"></div>
    <div class="popup-content">
    <div style="text-align:right; width: 100%">
        <a href="javascript:" onclick="hideSaveAdvancedSearch()">Close (X)</a>
    </div>

    Currently you see result of the following search:<br/>
    <code><i><?php p($description) ?></i>.</code>
    <br />
    You can save this search for later usage, just give it a descriptive name
    and press "Store" button.<br />

    <form method="post" action="<?php $this->pUrl(null, 'save-search') ?>" id="saveSearch">
        <input type="text" name="name" value="<?php p($description) ?>" size="40" maxlength="64"/><br />
        <input type="submit" value="Store" />
        <input type="hidden" name="a" value="save-search"/>
        <input type="hidden" name="search[serialized]" value="<?php p($serialized) ?>" />
    </form>
    </div>
    <div class="popup-bottom"></div>
    </div>
</div>

<script type="text/javascript">
    jQuery(document).ready(function($) {
        $('#advanced-search .delete').click(function(){
            var div = $(this).parents('.searchField');
            div.hide();
            $(':input', div).prop('disabled', true);
        });
        $('#advanced-search select#search-add-field').change(function(){
            if ($(this).val()=="") return;
            var id = $(this).val();
            var div = $("#"+id);
            div.show();
            $(':input', div).prop('disabled', false);
            this.selectedIndex = null;
        });
        $('#advanced-search tr.empty').hide();
        $('#advanced-search tr.empty :input').prop('disabled', true);

        if (!$("#query-form-advanced").length) // for compat
            $("#advanced-search").hide(); // remove it

    });
    function saveAdvancedSearch(link){
        $('#save-advanced-search')
            .toggle()
            .css('height', $(window).height() / 3  + 'px')
            .css('width', $(window).width() / 3 + 'px')
            .position({my:'center top',at:'center top',overflow:'fit',of:'.filter-wrap'});
        return false;
    }
    function hideSaveAdvancedSearch(){
        $('#save-advanced-search').hide();
        return false;
    }
    function toggleAdvancedSearch(button)
    {
        var id = 'advanced';
        $(button).toggleClass('active');
        $("#advanced-search")
        .toggle()
        .filter(":visible")
        .position({my:'right top',at:'right bottom',of:'.filter-wrap',overflow:'fit'});

    }
</script>